<form [bitSubmit]="submit" [formGroup]="deleteForm">
  <bit-dialog>
    <div bitDialogTitle>{{ "deleteAccount" | i18n }}</div>
    <div bitDialogContent>
      <p>{{ "deleteAccountDesc" | i18n }}</p>
      <bit-callout type="warning" title="{{ 'warning' | i18n }}">
        {{ "deleteAccountWarning" | i18n }}
      </bit-callout>
      <!-- Temporary border styles. TODO: Remove when app-user-verification is migrated to the CL. -->
      <div class="tw-mb-2 tw-rounded tw-border tw-border-solid tw-border-info-600/25">
        <app-user-verification
          ngDefaultControl
          formControlName="verification"
          name="verification"
        ></app-user-verification>
      </div>
      <div id="confirmIdentityHelp">
        <p>{{ "confirmIdentity" | i18n }}</p>
      </div>
    </div>
    <ng-container bitDialogFooter>
      <button bitButton bitFormButton type="submit" buttonType="danger" [disabled]="!secret">
        {{ "deleteAccount" | i18n }}
      </button>
      <button bitButton type="button" buttonType="secondary" bitFormButton bitDialogClose>
        {{ "cancel" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>
